<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<!-- <script src="../js/bootstrap/css/bootstrap-theme.min.css"></script> -->
<link rel="stylesheet" type="text/css" href="../mycss/style.css" />
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../laypage/laypage.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script language="javascript" type="text/javascript" src="../My97DatePicker/WdatePicker.js"></script>


<title>Insert title here</title>
</head>
<body id="tablePage">
<!-- 模态框：添加销售计划 -->
	<div class="modal fade" id="saveSalesPlanModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">添加销售计划</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal">
	      	  <!-- 销售计划编码 -->
			  <div class="form-group">
			    <label  class="col-sm-3 control-label">销售计划编码:</label>
			    <div class="col-sm-6">
			      <input type="text" name="salesPlanCode"  class="form-control" id="salesPlanCode_save_input" placeholder="格式姓名首字母小写+年月:如jk201712">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!-- 计划人姓名框 -->
			  <div class="form-group">
			    <label  class="col-sm-3 control-label">计划人姓名:</label>
			    <div class="col-sm-6">
			      <input type="text" name="name" class="form-control" id="name_save_input" placeholder="请填写姓名">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!-- 计划完成月 -->
			  <div class="form-group">
			    <label  class="col-sm-3 control-label">计划完成月:</label>
			    <div class="col-sm-6">
			      <input type="text" name="month" id="month_save_input" onfocus="WdatePicker({dateFmt:'yyyy-MM'})" class="Wdate" style="width:270px;height:32px;border-radius:5px" placeholder="请选择年月"/>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!-- 销售计划的内容 -->
			  <div class="form-group">
			    <label  class="col-sm-3 control-label">销售计划内容:</label>
			    <div class="col-sm-6">
			      <textarea rows="6" cols="6" name="salesPlanContent" class="form-control" id="salesPlanContent_save_input" placeholder="请填写销售内容"></textarea>
			      <span class="help-block"></span>
			    </div>
			  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="salesplan_save_btn" >提交</button>
	      </div>
	    </div>
	  </div>
	</div>
<!-- 模态框：修改销售计划 -->
	<div class="modal fade" id="updateSalesPlanModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">销售计划修改</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal">
	      	  <!-- 销售计划编码 -->
			  <div class="form-group">
			    <label for="inputEmail3" class="col-sm-3 control-label">销售计划编码:</label>
			    <div class="col-sm-6">
			      <p class="form-control-static" id="salesPlanCode_update_static"></p>
			    </div>
			  </div>
			  <!-- 计划人姓名 -->
			  <div class="form-group">
			    <label for="name_update_input" class="col-sm-3 control-label">计划人姓名:</label>
			    <div class="col-sm-6">
			      <input type="text" name="name" class="form-control" id="name_update_input" >
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!-- 计划完成月-->
		      <div class="form-group">
			    <label for="month_update_input" class="col-sm-3 control-label">计划完成月</label>
			    <div class="col-sm-6">
			      <input type="text" name="month" id="month_update_input" onfocus="WdatePicker({dateFmt:'yyyy-MM'})" class="Wdate" style="width:270px;height:32px;border-radius:5px" placeholder="请选择年月"/>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!-- 销售计划内容 -->
			   <div class="form-group">
			    <label  for="salesPlanContent_update_input" class="col-sm-3 control-label">销售计划内容:</label>
			    <div class="col-sm-6">
			      <textarea rows="6" cols="6" name="salesPlanContent" class="form-control" id="salesPlanContent_update_input" placeholder="请填写销售内容"></textarea>
			      <span class="help-block"></span>
			    </div>
			  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="salesplan_update_btn">更新</button>
	      </div>
	    </div>
	  </div>
	</div>
<!-- 模态框：查看销售计划 -->
	<div class="modal fade" id="findSalesPlanModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">销售计划内容</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal">
	      	  <!-- 销售计划编码 -->
			  <div class="form-group">
			    <label  class="col-sm-3 control-label">销售计划编码:</label>
			    <div class="col-sm-6">
			      <p class="form-control-static" id="salesPlanCode_find_static"></p>
			    </div>
			  </div>
			  <!-- 计划人姓名 -->
			  <div class="form-group">
			    <label  class="col-sm-3 control-label">计划人姓名:</label>
			    <div class="col-sm-6">
			        <p class="form-control-static" id="name_find_static"></p>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!-- 计划完成月-->
		      <div class="form-group">
			    <label  class="col-sm-3 control-label">计划完成月:</label>
			    <div class="col-sm-6">
			     <p class="form-control-static" id="month_find_static"></p>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!-- 销售计划内容 -->
			   <div class="form-group">
			    <label   class="col-sm-3 control-label">销售计划内容:</label>
			    <div class="col-sm-6">
			      <p class="form-control-static" id="salesPlanContent_find_static"></p>
			      <span class="help-block"></span>
			    </div>
			  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
 <div >	
		<blockquote>
			<p class="twoType">销售计划</p>
		</blockquote> 	
		<hr/>
	<div class="btnChange">
		<input type="text" id="month" onfocus="WdatePicker({dateFmt:'yyyy-MM'})" class="Wdate" style="width:160px;height:25px;border-radius:5px"/>
		<input class="btn btn-default btn-xs" type="button" value="查询" onclick="findSalesPlanByMonth()"/><br><br>
		<span>销售计划列表</span>
		<input class="btn btn-danger btn-xs" type="button" value="批量删除" style="margin-left:450px;width:70px" onclick="deleteSalesPlans()"/>
		<input class="btn btn-primary btn-xs" type="button" value="添加" style="margin-left:20px;width:50px" onclick="saveSalesPlan()"/>
	</div>
	<br>
	<div class="tableDiv">
		<form action="" >
		<table id="conTable" class="table table-bordered">
		  <thead>
			<tr class="info"><td></td><td><input type="checkbox" id="check_all" /></td><td>姓名</td><td>月份</td><td>状态</td><td>最后操作时间</td><td>操作人</td><td>操作</td></tr>
	      </thead>
	      <tbody id="salesplan">
			<tr class="active" v-for="hsp in home">
			     <td></td>
			     <td><input type="checkbox" class="check_item"  :value="hsp.salesPlanId" name="ss"/></td>
			     <td>{{hsp.name}}</td>
			     <td>{{hsp.month}}</td>
			     <td>{{hsp.state}}</td>
			     <td>{{hsp.finalOperTime}}</td>
			     <td>{{hsp.operator}}</td>
			     <td>
			     <input v-if="hsp.state=='已创建'" class="btn btn-primary btn-xs active edit_btn" :update_id="hsp.salesPlanId" type="button" value="修改">&nbsp;&nbsp;
			     <input class="btn btn-danger btn-xs active delete_btn" :delete_id="hsp.salesPlanId" type="button" value="删除">&nbsp;&nbsp;
			     <input class="btn btn-info btn-xs active find_btn" :find_id="hsp.salesPlanId" type="button" value="查看" >&nbsp;&nbsp;
			     <input v-if="hsp.state=='已创建'" class="btn btn-warning btn-xs active sub_btn" :sub_id="hsp.salesPlanId" type="button" value="提交">&nbsp;&nbsp;	     
			     </td>
			     </tr>
			      <tr >
			      <td id="clear" colspan="8"></td>
			      </tr>
		 </tbody>
		 
		</table>
		
	</form>	
	
	</div>
	
</div>
<script type="text/javascript" src="../js/salesplan.js"></script>
</body>
</html>